<template lang="pug">
  div
    .yearBox
      i.iconfont.icon-left(@click="yearEvent('left')")
      span {{year}}
      i.iconfont.icon-right(@click="yearEvent('right')")
    ul.monthBox
      li(v-for="(item,index) in getMonth"
        :key="index"
        :class="{active: item.value === month}"
        @click="changeMonth(item)") {{item.label}}
</template>

<script>
export default {
  name: 'MonthPicker',
  props: {
    currentMonth: {
      type: String,
      default: () => this.$moment().format('x')
    }
  },
  data () {
    return {
      year: Number(this.$moment().format('YYYY')),
      month: Number(this.$moment().format('MM'))
    }
  },
  computed: {
    getMonth () {
      const month = ['一', '二', '三', '四', '五', '六', '七', '八', '九', '十', '十一', '十二']
      return month.map((label, index) => {
        return {
          label: `${label}月`,
          value: index + 1
        }
      })
    }
  },
  methods: {
    yearEvent (event) {
      if (event === 'left') {
        this.year = Number(this.year) - 1
      } else if (event === 'right') {
        this.year = Number(this.year) + 1
      }
      this.emitMonth()
    },
    changeYear (data) {
      this.year = data.value
      this.emitMonth()
    },
    changeMonth (data) {
      this.month = data.value
      this.emitMonth()
    },
    emitMonth () {
      this.$emit('changeMonth', this.year, this.month)
    }
  }
}
</script>

<style lang="sass" scoped="scoped">
.yearBox
  display: flex
  align-items: center
  color: #555
  font-size: 16px
  >span
    display: block
    flex: 1
    text-align: center
  >i
    cursor: pointer
.monthBox
  display: flex
  justify-content: center
  flex-wrap: wrap
  margin-top: 30px
  width: 100%
  >li
    width: 25%
    height: 30px
    line-height: 30px
    font-size: 14px
    color: #555
    text-align: center
    margin: 0 10% 10px 0
    cursor: pointer
    &:nth-of-type(3n)
      margin-right: 0px
  .active
    background: #48b0f7
    color: #fff
    border-radius: 15px
</style>
